<template>
  <view class="myaddress">
    <!-- 无收货地址 -->
    <view class="no-address" v-if="JSON.stringify(address) === '{}'">
      <button @click="getAddress" type="primary" size="mini">请选择收货地址 + </button>
    </view>
    <!-- 有收货地址 -->
    <view class="has-address" @click="getAddress" v-else>
      <view class="top">
        <view class="name">收货人：{{ address.userName }}</view>
        <view class="phone">
          电话：{{ address.telNumber }}
        </view>
      </view>
      <view class="bottom">
        收货地址：{{ fullAddress }}
      </view>
    </view>
    <image class="myimg" src="../../static/images/cart_border@2x.png" mode=""></image>
  </view>
</template>

<script>
  import { mapState, mapMutations, mapGetters } from 'vuex'
  export default {
    name: "my-address",
    data() {
      return {
        // address: {}
      };
    },
    computed: {
      ...mapState('user', ['address']),
      ...mapGetters('user', ['fullAddress'])
    },
    methods: {
      ...mapMutations('user', ['setAddress']),
      // 获取收货地址
      async getAddress () {
        const [err, res] = await uni.chooseAddress()
        if (err) return uni.$showMsg('获取地址失败')
        // 保存收货地址
        // this.address = res
        this.setAddress(res)
      }
    }
  }
</script>

<style lang="scss">
  .myaddress {
    .no-address {
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .has-address {
      font-size: 14px;
      padding: 10px;
      line-height: 30px;

      .top {
        display: flex;
        justify-content: space-between;
      }

      .bottom {}
    }

    .myimg {
      width: 100%;
      height: 5px;
    }
  }
</style>
